<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_1891092_oa3swx3uqx.css"
    />
    <link rel="stylesheet" href="index.css" />
    <title>Document</title>
  </head>

  <body>
    <div class="phone">
      <div class="phone-back">
        <div class="phone-left-side">
          <div class="phone-antena"></div>
          <div class="phone-button top"></div>
          <div class="phone-button"></div>
          <div class="phone-button bottom"></div>
          <div class="phone-antena bottom"></div>
        </div>
        <div class="phone-bottom">
          <div class="phone-antena"></div>
          <div class="bottom-speaker">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="phone-screw">
            <div></div>
          </div>
          <div class="phone-charger"></div>
          <div class="phone-screw right">
            <div></div>
          </div>
          <div class="bottom-speaker right">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="phone-antena right"></div>
        </div>
      </div>
      <div class="phone-screen">
        <div class="display">
          <img src="./bannerTop_new.png" alt="" class="banner" />
          <div class="topbar">
            <div class="time">12:20</div>
            <div class="right">
              <span class="rate">200k/s</span>
              <i class="iconfont iconsignal"></i>
              <i class="iconfont iconwifi"></i>
              <i class="iconfont iconBatterychargeveryhigh"></i>
            </div>
          </div>
          <div class="firstline">
            <img
              src="https://i1.hdslb.com/bfs/face/4add3acfc930fcd07d06ea5e10a3a377314141c2.jpg"
              class="avatar"
              data-v-2d9266af=""
            />
            <div class="rightbase">
              <div class="top">
                <div class="fans">
                  <div>317</div>
                  <div>粉丝</div>
                </div>
                <i class="iconfont iconvertical_line"></i>
                <div class="guanzhu">
                  <div>11</div>
                  <div>关注</div>
                </div>
                <i class="iconfont iconvertical_line"></i>
                <div class="zan">
                  <div>779</div>
                  <div>获赞</div>
                </div>
              </div>
              <div class="button">
                <i class="iconfont iconplus"></i>
                <span class="text">关注</span>
              </div>
            </div>
          </div>
          <div class="namesex">
            <div class="name">Libra121</div>
            <i class="iconfont iconman"></i>
            <div class="huiyuan">年度大会员</div>
          </div>
          <div class="exp">
            <div class="exptop">
              <span class="lv">LV</span><span class="lvnum">2</span>
              <span class="expnum">845/1500</span>
            </div>
            <div class="expbar"></div>
          </div>
          <div class="detail">
            <div class="content">coder</div>
            <div class="detailbtn">详情</div>
          </div>
          <div class="title">
            <div class="text">主页</div>
            <div class="text selected">动态</div>
            <div class="text">投稿</div>
            <div class="text">收藏</div>
            <div class="text">追番</div>
          </div>
          <div class="header">
            <img
              src="https://i1.hdslb.com/bfs/face/4add3acfc930fcd07d06ea5e10a3a377314141c2.jpg"
              alt=""
              class="pic"
            />
            <div class="right">
              <div class="name">Libra121</div>
              <div class="des">昨天 投稿了视频</div>
            </div>
          </div>
          <div class="category">
            #前端##CSS3##CSS#
          </div>
          <img
            src="https://i2.hdslb.com/bfs/archive/29e20ac3429e0a0c01986fc3e1d747047cb35899.jpg@702w_394h.webp"
            alt=""
            class="fengmian"
          />
        </div>
      </div>
    </div>
    <script>
      var i = document.querySelector(".button i");
      var btn = document.querySelector(".button");
      var text = document.querySelector(".button .text");
      var flag = true;
      btn.onclick = function () {
        if (flag) {
          i.classList.remove("iconplus");
          i.classList.add("iconmenu1");
          btn.style.borderColor = "#bbb";
          i.style.color = "#bbb";
          text.style.color = "#bbb";
          text.innerHTML = "已关注";
          flag = false;
        } else {
          i.classList.remove("iconmenu1");
          i.classList.add("iconplus");
          btn.style.borderColor = "#fb7299";
          i.style.color = "#fb7299";
          text.style.color = "#fb7299";
          text.innerHTML = "关注";
          flag = true;
        }
      };
    </script>
  </body>
</html>
